<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/bootstrap/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/layerui/laydate/theme/default/laydate.css"/>
    <link rel="stylesheet" href="/static/iCheck/css/custom.css"/>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/static/cropper/cropper.css"/>
    <link rel="stylesheet" href="/css/sys/user/gg-bootdo.css"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="ibox">
                <div class="ibox-title" style="padding-bottom: 0;">
                    <h3 class="text-center">个人资料中心</h3>
                    <div class="gg-nav">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#basic_info" data-toggle="tab">基本资料</a></li>
                            <li><a href="#photo_info" data-toggle="tab">头像修改</a></li>
                            <li><a href="#pwd_info" data-toggle="tab">修改密码</a></li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content">
                    <!--basic info-->
                    <div class="ibox-content tab-pane fade in active" id="basic_info">
                        <form class="gg-form" role="form" id="basicInfoForm">
                            <input name="userId" type="hidden" value="${user.userId!}"/>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>姓名:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="userName" name="name"
                                           value="${user.name!}" placeholder="请输入姓名"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>性别:</span>
                                </div>
                                <div class="gg-formDetail i-checks">
                                        <label class="radio-inline">
                                            <input type="radio" name="sex" value="1" <#if '${user.sex!}'== '1'>checked</#if>> 男
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="sex"  value="2" <#if '${user.sex!}'=='2'>checked</#if>> 女
                                        </label>
                                    </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>出生年月:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="laydate-icon layer-date form-control" id="birth"
                                           name="birth" value="${user.birth?string("yyyy-MM-dd")}"
                                           placeholder="请选择出生年月"
                                           />
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>手机:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="phone" name="mobile"
                                           value="${user.mobile!}" placeholder="请输入手机号"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>邮箱:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="email" name="email"
                                           value="${user.email!}" placeholder="请输入邮箱"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>居住地:</span>
                                </div>
                                <div class="gg-formDetail gg-font0" data-toggle="distpicker"
                                     attr="data-province=${user.province!},data-city=${user.city!},data-district=${user.district!}">
                                    <div class="gg-area">
                                        <select class="form-control" id="province" name="province">
                                        </select>
                                    </div>
                                    <div class="gg-area">
                                        <select class="form-control" id="city" name="city">
                                        </select>
                                    </div>
                                    <div class="gg-area">
                                        <select class="form-control" id="district" name="district">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>联系地址:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="address" name="liveAddress"
                                           value="${user.liveAddress!}" placeholder="请输入居住地址"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>爱好:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <div class="i-checks">
                                        <input type="hidden" name="hobby" id="hobby"/>
                                        <#list hobbyList as hobby>
                                            <#if '${user.hobby}'?contains('${hobby.value},') >
                                                <#assign hobby_check = 'checked'>
                                            <#else>
                                                <#assign hobby_check = ''>
                                            </#if>
                                        <input type="checkbox" class="hobby"   value="${hobby.value}" ${hobby_check} />${hobby.name}
                                        </#list>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="gg-btnGroup">
                            <button type="button" class="btn btn-sm btn-primary" id="base_save">保存</button>
                        </div>
                    </div>
                    <!--photo_info-->
                    <div class="ibox-content tab-pane fade gg" id="photo_info">
                        <div class="ggcontainer" id="crop-avatar">
                            <form class="avatar-form" action="/sys/user/uploadImg" enctype="multipart/form-data"
                                  method="post">
                                <div class="avatar-body">
                                    <div class="avatar-upload">
                                        <input class="avatar-src" name="avatar_src" type="hidden">
                                        <input class="avatar-data" name="avatar_data" type="hidden">
                                        <label for="avatarInput">选取文件</label>
                                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                    </div>
                                    <!-- Crop and preview -->
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="avatar-wrapper"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="avatar-preview preview-lg"></div>
                                            <div class="avatar-preview preview-md"></div>
                                            <div class="avatar-preview preview-sm"></div>
                                        </div>
                                    </div>

                                    <div class="row avatar-btns">
                                        <div class="col-md-9">
                                            <div class="btn-group">
                                                <button class="btn btn-primary" data-method="rotate" data-option="-90"
                                                        type="button" title="Rotate -90 degrees">左旋转
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-15"
                                                        type="button">-15°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-30"
                                                        type="button">-30°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-45"
                                                        type="button">-45°
                                                </button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn btn-primary" data-method="rotate" data-option="90"
                                                        type="button" title="Rotate 90 degrees">右旋转
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="15"
                                                        type="button">15°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="30"
                                                        type="button">30°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="45"
                                                        type="button">45°
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-primary btn-block avatar-save" type="submit">完成裁剪
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!-- Loading state -->
                            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                        </div>
                    </div>
                    <!--pwd_info-->
                    <div class="ibox-content tab-pane fade" id="pwd_info">
                        <form class="gg-form" role="form" id="modifyPwd">
                            <a id="logout" class="hidden" href="/logout"></a>
                            <input type="hidden" name="userDO.userId" value="${user.userId}"/>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>旧密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="pwdOld" name="pwdOld"
                                           placeholder="请输入旧密码"/>
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"></span>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>新密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="pwdNew" name="pwdNew"
                                           placeholder="请输入新密码"/>
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"></span>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>确认密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="confirm_password"
                                           name="confirm_password" placeholder="请确认密码"/>
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"></span>
                                </div>
                            </div>
                        </form>
                        <div class="gg-btnGroup">
                            <button type="button" class="btn btn-sm btn-primary" id="pwd_save">保存</button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<!--图片裁剪-->
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/bootstrap/bootstrap-table/locale/bootstrap-table-en-US.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/static/iCheck/js/icheck.min.js"></script>
<script type="text/javascript" src="/static/layerui/laydate/laydate.js"></script>
<script src="/static/jquery/validate/jquery.validate.min.js"></script>
<script src="/static/jquery/validate/jquery.validate.extend.js"></script>
<script src="/static/layerui/layer.js"></script>
<script src="/js/common/common.js"></script>
<script type="text/javascript" src="/static/cropper/cropper.min.js"></script>
<!--地址三级连动杆-->
<script type="text/javascript" src="/static/distpicker/distpicker.data.min.js"></script>
<script type="text/javascript" src="/static/distpicker/distpicker.min.js"></script>
<script type="text/javascript" src="/js/sys/user/gg-bootdo.js"></script>
<script type="text/javascript">
    $(function () {
        laydate.render({
            elem: '#birth'
        });
        //初始化icheck插件
        $(".i-checks").iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
        $(".gg-faeye").on('mouseover', function () {
            $('#pwdOld').prop('type', 'text');
            $('#pwd').prop('type', 'text');
            $('#confirm_password').prop('type', 'text');
        });
        $(".gg-faeye").on('mouseout', function () {
            $('#pwdOld').prop('type', 'password');
            $('#pwd').prop('type', 'password');
            $('#confirm_password').prop('type', 'password');
        });
    });
    /**
     * 基本信息提交
     */
    $("#base_save").click(function () {
        var hobbyStr = getHobbyStr();
        $("#hobby").val(hobbyStr);
        if ($("#basicInfoForm").valid()) {
            $.ajax({
                cache: true,
                type: "POST",
                url: "/sys/user/updatePeronal",
                data: $('#basicInfoForm').serialize(),
                async: false,
                error: function (request) {
                    laryer.alert("Connection error");
                },
                success: function (data) {
                    if (data.code == 0) {
                        parent.layer.msg("更新成功");
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }

    });
    $("#pwd_save").click(function () {
        if ($("#modifyPwd").valid()) {
            $.ajax({
                cache: true,
                type: "POST",
                url: "/sys/user/resetPwd",
                data: $('#modifyPwd').serialize(),
                async: false,
                error: function (request) {
                    parent.laryer.alert("Connection error");
                },
                success: function (data) {
                    if (data.code == 0) {
                        parent.layer.alert("更新密码成功");
                        $("#photo_info").click();
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }
    });

    function getHobbyStr() {
        var hobbyStr = "";
        $(".hobby").each(function () {
            if ($(this).is(":checked")) {
                hobbyStr += $(this).val() + ",";
            }
        });
        return hobbyStr;
    }
</script>
</body>
</html>
